<template>
  <div id="cusUp" v-if="CustomerInf.name">
    <div>
      <i class="el-icon-user"></i>:
      <el-input
        v-model="CustomerInf.account"
        placeholder="请输入账号"
      ></el-input>
    </div>
    <div>
      <i class="el-icon-view"></i>:
      <el-input
        placeholder="请输入密码"
        show-password
        v-model="CustomerInf.password"
      ></el-input>
    </div>
    <div v-if="CustomerInf.name">
      <i class="el-icon-postcard"></i>:
      <el-input v-model="CustomerInf.name" placeholder="请输入姓名"></el-input>
    </div>
    <div>
      <i class="el-icon-coordinate"></i>:
      <el-input v-model="CustomerInf.age" placeholder="请输入年龄"></el-input>
    </div>
    <div>
      <i class="el-icon-phone-outline"></i>:
      <el-input v-model="CustomerInf.phone" placeholder="请输入电话"></el-input>
    </div>
    <div>
      <i class="el-icon-male"></i>:
      <el-radio v-model="CustomerInf.gender" label="男">男</el-radio>
      <el-radio v-model="CustomerInf.gender" label="女">女</el-radio>
    </div>
    <div>
      <i class="el-icon-monitor"></i>:
      <el-select
        v-model="CustomerInf.salesMenId.name"
        placeholder="请选择销售员"
      >
        <el-option
          v-for="item in salesMen"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        >
        </el-option>
      </el-select>
    </div>
    <el-button
      type="success"
      @click="
        changeCustomers({
          _id: _id,
          account: CustomerInf.account,
          password: CustomerInf.password,
          name: CustomerInf.name,
          age: CustomerInf.age,
          gender: CustomerInf.gender,
          phone: CustomerInf.phone,
          salesMenId: CustomerInf.salesMenId.name,
        })
      "
      >确认修改</el-button
    >
  </div>
</template>

<script>
import axios from '../../http/axios'
import { createNamespacedHelpers } from 'vuex'
const {
  mapActions: mapActionsSalesMen,
  mapState: mapStateSalesMen,
} = createNamespacedHelpers('salesMen')
const { mapActions: mapActionsCustomers } = createNamespacedHelpers('Customers')
export default {
  props: ['_id'],
  data() {
    return {
      CustomerInf: {},
    }
  },
  computed: {
    ...mapStateSalesMen(['salesMen']),
  },
  mounted() {
    this.getCustomerById(this._id)
    this.getSalesMen()
  },
  methods: {
    ...mapActionsSalesMen(['getSalesMen']),
    ...mapActionsCustomers(['changeCustomers']),
    async getCustomerById(_id) {
      const { data } = await axios({
        url: '/customers/getCustomerById',
        method: 'get',
        params: { _id },
      })
      this.CustomerInf = data[0]
    },
  },
}
</script>

<style>
.el-input {
  width: 30%;
}
i {
  font-size: 25px;
}
.el-select .el-input {
  width: 100%;
}
#cusUp > div {
  margin: 10px auto;
}
</style>
